<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('账单详情')"/>
    <th:block th:include="include :: toastr-css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"
     style="padding-left: 8px !important; padding-right: 8px; !important">

    <div class="row">
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月收入</h5>
                    <h1 class="no-margins" id="incomeId">0</h1>
                    <div class="stat-percent font-bold text-navy" id="incomeLastId">0 </div>
                    <small>对比上月</small>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月支出</h5>
                    <h1 class="no-margins" id="payId">0</h1>
                    <div class="stat-percent font-bold text-navy" id="payLastId">0 </div>
                    <small>对比上月</small>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月不计入</h5>
                    <h1 class="no-margins" id="moneyIgnoreId">0</h1>
                    <div class="stat-percent font-bold text-navy" id="moneyIgnoreLastId">0 </div>
                    <small>对比上月</small>
                </div>
            </div>
        </div>

    </div>

    <div class="row" >

        <!--支出饼状图-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>

        <!--收入折线图-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <div class="echarts" id="smoothed-line-chart"></div>
                </div>
            </div>
        </div>

        <!--    月份收入支出日历图    -->
        <div class="col-sm-12" >
            <div class="ibox float-e-margins"  >
                <div class="ibox-content" style="padding-left: 5px; padding-right: 5px; ">
                    <div id='calendar'></div>
                </div>
            </div>
        </div>

        <!--近一年收支情况-->
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div style="height:600px" id="recent-line-chart"></div>
                </div>
            </div>
        </div>

    </div>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<!-- fullCalendar v6.1.1 -->
<script th:src="@{/blog/fullcalendar/index.global.min.js}"></script>
<th:block th:include="include :: toastr-js"/>
<script type="text/javascript">

    $.ajax({
        type: "get",
        url: "/account/bill/bullCount/month?month=" + '[[${month}]]',
        dataType: "json",
        success: function (data) {
            console.log(data);
            toastr.success("本月总支出" + data.totalPay);
            // 支付图
            var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
            var pieoption = {
                title: {
                    text: '[[${month}]]' + ' 支出统计',
                    subtext: '理性消费',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: data.payTypeList
                },
                calculable: true,
                series: [
                    {
                        name: '支出',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data.payData
                    }
                ]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);

            // 收入图
            var pieChart = echarts.init(document.getElementById("smoothed-line-chart"));
            var pieoption = {
                title: {
                    text: '[[${month}]]' + ' 收入统计',
                    subtext: '合法收入',
                    x: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: data.incomeTypeList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: data.incomeMoneyList,
                        type: 'line',
                        smooth: true
                    }
                ]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);
        }
    })

    $.ajax({
        type: "get",
        url: "/account/bill/bullCount/moneyByMonth?month=" + '[[${month}]]',
        dataType: "json",
        success: function (data) {

            // 总收入
            $('#incomeId').html(data.incomeList[0]);
            if (data.incomeList.length>1) {
                var incomeId = (data.incomeList[0]- data.incomeList[1]).toFixed(2);
                $('#incomeLastId').html(incomeId);
                incomeId < 0? $('#incomeLastId').removeClass('text-navy').addClass('text-success') : $('#incomeLastId').removeClass('text-navy').addClass('text-danger');
                incomeId < 0? $('#incomeLastId').removeClass('fa fa-level-up').addClass('fa fa-level-down') : $('#incomeLastId').removeClass('fa fa-level-up').addClass('fa fa-level-up');


            }

            // 总支出
            $('#payId').html(data.payList[0]);
            if (data.payList.length>1) {
                var payLast = (data.payList[0]- data.payList[1]).toFixed(2);
                $('#payLastId').html(payLast);
                payLast < 0? $('#payLastId').removeClass('text-navy').addClass('text-success') : $('#payLastId').removeClass('text-navy').addClass('text-danger');
                payLast < 0? $('#payLastId').removeClass('fa fa-level-up').addClass('fa fa-level-down') : $('#payLastId').removeClass('fa fa-level-up').addClass('fa fa-level-up');
            }

            // 总不计入
            $('#moneyIgnoreId').html(data.moneyIgnoreList[0]);
            if (data.moneyIgnoreList.length>1) {
                var moneyIgnoreLast = (data.moneyIgnoreList[0]- data.moneyIgnoreList[1]).toFixed(2);
                $('#moneyIgnoreLastId').html(moneyIgnoreLast);
                moneyIgnoreLast < 0 ? $('#moneyIgnoreLastId').removeClass('text-navy').addClass('text-success') : $('#moneyIgnoreLastId').removeClass('text-navy').addClass('text-danger');
                moneyIgnoreLast < 0? $('#moneyIgnoreLastId').removeClass('fa fa-level-up').addClass('fa fa-level-down') : $('#moneyIgnoreLastId').removeClass('fa fa-level-up').addClass('fa fa-level-up');

            }

            // 近期收支分析
            var pieChart = echarts.init(document.getElementById("recent-line-chart"));
            var pieoption = {
                title: {
                    text: '近一年分析',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['收入', '支出', '不计入'],
                    top: '4%',
                },
                grid: {
                    left: '1%', // 调整左边距
                    right: '1%', // 调整右边距
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel:{
                        interval:0,//横轴信息全部显示
                        rotate:45,//-30度角倾斜显示
                        fontSize:10,// 字体大小
                    },
                    data: data.monthList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '收入',
                        type: 'line',
                        data: data.incomeList
                    },
                    {
                        name: '支出',
                        type: 'line',
                        data: data.payList
                    },
                    {
                        name: '不计入',
                        type: 'line',
                        data: data.moneyIgnoreList
                    }
                ]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);
        }
    })

</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {

        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'zh-cn',
            locale: 'zh-cn',
            initialView: 'dayGridMonth',
            contentHeight: 650,
            initialDate: '[[${month}]]',
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            eventOrderStrict: true,
            eventOrder: 'order',

            events: function (start, callback) {

                $.ajax({
                    type: "get",
                    url: '/account/bill/bullCount/billConuntByMonth',
                    dataType: "json",
                    data: {
                        // month: '2021-10'
                        month: '[[${month}]]'
                    },
                    success: function (result) {
                        var events = [];
                        if (result.code === 0 && result.rows) {
                            events = result.rows;
                        }
                        callback(events);
                    }
                });
            }
        });
        calendar.render();
    });


</script>

</body>
</html>
